/**
 * 岗位授权清单列表
 */
<template>
	<vp-main-page @refresh="loadDataList" :tableRef="tableRef">
		<template #search>
			<el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList" label-width="120px">
				<vp-search-row :show-more="showMore">
					<vp-search-col>
						<el-form-item prop="rybh">
							<template #label><vp-label zh="人员编号" en="Employee No." /></template>
							<el-input v-model="searchForm.rybh" v-trim></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="ryxm">
							<template #label><vp-label zh="人员姓名" en="Employee Name."/></template>
							<el-input v-model="searchForm.ryxm" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
                        <el-form-item field="zzzt">
                            <template #label><vp-label zh="在职状态" en="Employed status" /></template>
                            <el-select class="w100" v-model="searchForm.zzzt" placeholder="请选择/Please Choose" clearable
                                collapse-tags>
                                <el-option :value="10" label="在职/Employed"></el-option>
                                <el-option :value="20" label="离职/Resign"></el-option>
                            </el-select>
                        </el-form-item>
                    </vp-search-col>
					<vp-search-col>
                        <el-form-item prop="gwmc">
                            <template #label><vp-label zh="岗位" en="Position" /></template>
                            <el-input v-model="searchForm.gwmc" readonly>
                                <template #append>
                                    <el-button @click="handleChoosePosition">
                                        <SvgIcon name="ele-Search" />
                                    </el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </vp-search-col>
					<vp-search-col>
						<el-form-item :label-width="120" prop="yjbs">
							<el-checkbox v-model="searchForm.yjbs" :true-value="1" :false-value="0">
								<vp-label zh="仅看预警数据" en="Only Warning Data"/>
							</el-checkbox>
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList"/>
						<vp-btn-reset @click="handleSearchReset"/>
						<vp-btn-more @change="showMore = $event"/>
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #actions>
			
		</template>
		<template #table>
			<vp-vxe-table
				id="postApplyTable"
				ref="tableRef" 
				:data="tableData" 
				@sort-change="handleSortChange" 
				row-key="id"
				v-loading="loading"
				:row-class-name="tableRowClassName"
			>	
				<vxe-column type="seq" align="center" title="#" width="50" />
				<vxe-column 
					field="rybh" 
					show-overflow
					min-width="140"
				>
					<template #header><vp-label zh="⼈员编号" en="Employee No."/></template>
				</vxe-column>
				<vxe-column 
					field="ryxm" 
					show-overflow 
					min-width="150"
				>
					<template #header><vp-label zh="⼈员姓名" en="Employee Name" /></template>
				</vxe-column>
				<vxe-column 
					field="gwbh" 
					show-overflow 
					min-width="150"
				>
					<template #header><vp-label zh="岗位编号" en="Position No." /></template>
				</vxe-column>
				<vxe-column 
					field="gwmc" 
					show-overflow
					min-width="140"
				>
					<template #header><vp-label zh="岗位名称" en="Position Name"/></template>
				</vxe-column>
				<vxe-column 
					field="jx" 
					show-overflow 
					min-width="180"
				>
					<template #header><vp-label zh="机型" en="AC Type" /></template>
					<template #default="scope">
						{{ (scope.row.jx || '') + ' ' + (scope.row.lx || '') }}
					</template>
				</vxe-column>
				<vxe-column 
					field="yxqks" 
					show-overflow 
					min-width="180"
				>
					<template #header><vp-label zh="有效期" en="Exp. Period" /></template>
					<template #default="scope">
						{{ (scope.row.yxqks || '') + ' ~ ' + (scope.row.yxqjz || '') }}
					</template>
				</vxe-column>
			</vp-vxe-table>
		</template>
		<template #pagination>
			<vp-pagination
				@change="loadDataList"
				:total="page.total" 
				v-model:currentPage="page.pageNum"
				v-model:pageSize="page.pageSize"
			>
			</vp-pagination>
		</template>
		<VpPositionDialog ref="vpPositionDialogRef"></VpPositionDialog>
	</vp-main-page>
</template>
<script setup lang="ts" name="postApply">
import { onMounted, reactive, ref, defineAsyncComponent } from 'vue'
import request from '/@/utils/request';
import { useRoute, useRouter } from 'vue-router';
import { DEFAULT_PAGE } from '/@/utils/page';
import VpMessageBox from '/@/components/vp/VpMessageBox';
import VpStatusMultSelect from "/@/components/vp/status/VpStatusMultSelect.vue";
import { markTextColor } from '/@/utils/toolsValidate';
import commonFunction from '/@/utils/commonFunction';

const VpPositionDialog = defineAsyncComponent(() => import('/@/components/vp/position/VpPositionDialog.vue'));

const searchForm = reactive({
	rybh: "",
    ryxm: "",
    gwid: "",
    gwmc: "",
    yjbs: 0,
    zzzt: null,
});

const page = reactive({
	...DEFAULT_PAGE,
})

const showMore = ref(false);
const loading = ref(false);
const tableData = ref([]);

const router = useRouter();

// 加载列表数据
const loadDataList = () => {
	loading.value = true;
	request.get('/quality/postApply/authlist', {
		params: {
			...searchForm,
			...page,
		}
	}).then(res => {
		tableData.value = res?.data?.list || [];
		page.total = res?.data?.total || 0;
		page.pageNum = res?.data?.pageNum || 1;
	}).finally(()=>{
		loading.value = false;
	})
}

const searchFormRef = ref();
// 重置搜索条件
const handleSearchReset = ()=>{
	searchFormRef.value.resetFields();
	searchForm.gwid = "";
    searchForm.gwmc = "";
	searchForm.zzzt = null;
	loadDataList();
}

// 列表字段排序
const handleSortChange = (column: any)=>{
	page.sortColumn = column.field;
	page.sortOrder = column.order;
	loadDataList()
}

const vpPositionDialogRef = ref()
const handleChoosePosition = () =>{
  vpPositionDialogRef.value.handleOpen({
    selected: searchForm.gwid,
    callback: (data: any) => {
        if(searchForm.gwid != data.id){
            searchForm.items = [];
        }
        searchForm.gwid = data.id;
        searchForm.gwmc = data.mc;
    }
  })
}

const {getThreshold} = commonFunction();
const threshold = ref({ 
	key: '',
	yjtsJb1: '',
	yjtsJb2: '',
});

// 对预警数据标记
const tableRowClassName = ({row}: {row: any})=>{
	console.info(threshold.value, 123456);
	if(!threshold.value.key){
		return;
	}
	if(row.syts || row.syts === 0){
		if(threshold.value.yjtsJb1 >=  row.syts){
			return "row-warning1"
		}
		if(threshold.value.yjtsJb2 >=  row.syts){
			return "row-warning2"
		}
	}
}

onMounted(() => {
	// 从首页预警跳转进来，则默认勾选预警查询条件
	const route = useRoute();
	if (route.query && route.query.yjbs) {
		searchForm.yjbs = parseInt(route.query.yjbs as string);
	}

	loadDataList();

	// 加载预警值
	getThreshold("QUALITY_POST_AUTH").then((res)=>{
		threshold.value = res?.data || {};
	})
})

const tableRef = ref();

</script>

<style scoped lang="scss">
</style>